<template>
  <div class="table-box">
    <el-table :data="data" border style="width: 100%">
      <el-table-column fixed type="index" label="序号" width="80"/>
      <el-table-column prop="username" label="用户名" width="100" />
      <el-table-column prop="password" label="密码" width="100" />
      <el-table-column prop="age" label="年龄" width="80" />
      <el-table-column prop="sexTxt" label="性别" width="80" />
      <el-table-column prop="roleTxt" label="角色" width="100" />
      <el-table-column label="创建日期" width="200">
        <template #default="scope">{{ scope.row.createdAt }}</template>
      </el-table-column>
      <el-table-column prop="phone" label="手机号" width="120" />
      <el-table-column prop="userid" label="用户id" width="150" show-overflow-tooltip />
      <el-table-column prop="photo" label="头像" width="150"  show-overflow-tooltip />
      <el-table-column label="修改日期" width="200">
        <template #default="scope">{{ scope.row.updatedAt }}</template>
      </el-table-column>
      <el-table-column fixed="right" label="Operations" min-width="120">
        <template #default="scope">
          <el-button
            link
            type="primary"
            size="small"
            @click="editHandle(scope.row)"
            >编辑</el-button
          >
          <el-button
            link
            type="danger"
            size="small"
            @click="delHandle(scope.row)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
  </div>

</template>

<script setup name="user">
import { ref, reactive } from "vue";
import { useMessage } from "@/hooks/message";
import {delUserApi} from '@/api/user';

const props = defineProps(['data'])
const emit = defineEmits(['search', 'edit'])

const message = useMessage();

const editHandle = (option) => {
  emit('edit', option)
};

const delHandle = (option) => {
  delUserApi(option.userid).then((res) => {
    emit('search')
    message.success(res.msg);
  });
};

</script>

<style lang="less" scoped>

.table-box {
  background-color: #fff;
  margin-top: 10px;
  padding: 20px;
}

</style>
